<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--使用taglib引入标签--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>${requestScope.goods.goods_name}</title>
		<link href="css/datils.css" rel="stylesheet"/>
		<!--<script type="text/javascript" src="js/sweetalert-dev.js"></script>-->
		<!--<link rel="stylesheet" type="text/css" href="js/sweetalert.css">-->
		<script>
			$(function () {
				$(".show_head").click(function () {
					location.href="/user?method=showInformation&id="+${userList.user_id}
				})
				$(".show_name").click(function () {
					location.href="/user?method=showInformation&id="+${userList.user_id}
				})
			})
		</script>
	</head>
	<body>
		<div>
			<!--头部-->
			<div class="div-top">
				<div class="div1">
					<!--头部左端-->
					<div class="div1-top-left">
						<c:if test="${!empty userList}">
							<img class="show_head" src="${userList.user_head}">
							<div class="show_name">欢迎您，${userList.user_name}</div>
						</c:if>
						<%--<div id="show_username" style="display: none"></div>--%>
						<c:if test="${empty userList}">
							<ul>
								<li class="li-top"><a href="/user?method=showLogin" class="a1">亲，请登录</a></li>
								<li class="li-top"><a href="/user?method=showRegister" class="a2">注册</a></li>
							</ul>
						</c:if>
					</div>
					<!--头部右端-->
					<div class="div1-top-right">
						<ul class="li-right">
							<li class="li-top"><a href="" class="a2">首页</a></li>
							<li class="li-top"><a href="" class="a2">商品分类</a></li>
							<li class="li-top"><a href="" class="a2">我的拍卖</a></li>
						</ul>
					</div>
				</div>
			</div>
			
			<!--中间部分-->
			<div class="div-center">
				<div><img src="image/1.jpg" class="picture1"/></div>
				<div class="div2" >
					<ul class="div2-ul">
						<li class="div2-ul-li"><a href="" class="a2">艺术品</a></li>
						<li class="div2-ul-li"><a href="" class="a2">预展历史</a></li>
						<li class="div2-ul-li"><a href="" class="a2">机构招商</a></li>
					</ul>
					<div>
						<button type="submit" class="button1">搜索</button>
					    <input type="text" placeholder="用拍品名称搜索" class="div2-input"/>
				    </div>
				    
				</div>
				<div class="div3-zw">
					<!--中间开始左半部分-->
					<div class="div3-left">
						<div class="div4">
							<div class="div4-left">
								<!--轮播图-->
								  <div class="container">    
							          <img  class="on" src="${requestScope.goods.goods_picture}"/>
							          <img src="image/详情2.JPG" />
							          <img src="image/详情3.JPG"/>
							          <!-- 左右按钮 -->
							          <div class="left">&lt;</div>
							          <div class="right">&gt;</div>
							         <!-- 焦点 -->
							         <ul>
							             <li class="active"></li>
							             <li></li>
							             <li></li>
							             <li></li>
							             <li></li>
							         </ul>
							      </div>
							     <script type="text/javascript">
							        //1、找到container下的所有img标签,li标签,左右按钮
							         var aImgs = document.querySelectorAll('.container img'); 
							         var aLis = document.querySelectorAll('.container li');
							         var btnLeft = document.querySelector('.container .left');
							         var btnRight = document.querySelector('.container .right');
							         var index = 0;        //当前图片下标
							         var lastIndex = 0;
							         btnRight.onclick = function(){
							            //记录上一张图片的下标
							            lastIndex = index;
							             //清除上一张图片的样式
							            aImgs[lastIndex].className = '';
							           aLis[lastIndex].className = '';
							             index++;
							            index %= aImgs.length;    //实现周期性变化
							            //设置当前图片的样式
							             aImgs[index].className = 'on';
							            aLis[index].className = 'active';
							         }
							        //左边按钮类似
							        btnLeft.onclick = function(){
							             //记录上一张图片的下标
							            lastIndex = index;
							             //清除上一张图片的样式
							             aImgs[lastIndex].className = '';
							            aLis[lastIndex].className = '';
							
							            index--;
							            if (index < 0) {
							               index = aImgs.length - 1;
							            }
							            //设置当前图片的样式
							            aImgs[index].className = 'on';
							            aLis[index].className = 'active';
							         }
							     </script>	
							     <!--左边图下-->
							     <div class="div16">
							     	<p>&nbsp;&nbsp;&nbsp;送拍机构：园中葵文化艺术中心</p>
							     	<p><span>&nbsp;&nbsp;&nbsp;特色服务：</span>
							     		<span class="service"><b>√</b> 一物一证   </span>
							     		<span class="service"><b>√</b> 假一赔三    </span>  
							     		<span class="service"><b>√</b> 拍前预览  </span>
							     		<span class="service"><b>√</b> 作者授权</span>
							     		<%--<span class="service"><b>√</b> 花呗  </span>--%>
							     	</p>
							     </div>
							</div>	
							<!--右边拍卖时间-->
							<div class="div4-right">
								<p><h3 style="text-align: center;">${requestScope.goods.goods_name}</h3></p>
							    <div>
									<%
										SimpleDateFormat sdf = new SimpleDateFormat("YYYY-MM-dd hh:mm:ss");
										String now = sdf.format(new Date());
										session.setAttribute("time_compare",now);
									%>
									<c:choose>
										<c:when test="${goods.end_time le time_compare}">
											<c:if test="${goods.auction_times==0}">
												<button id="button2-1" >流拍</button>
											</c:if>
											<c:if test="${goods.auction_times>0}">
												<button id="button2-1" >已结束</button>
											</c:if>
										</c:when>
										<c:when test="${goods.start_time gt time_compare}">
											<button id="button2" style="background-color: blue">未开始</button>
										</c:when>
										<c:otherwise>
											<button id="button2" >竞拍中</button>
										</c:otherwise>
									</c:choose>
							    	<span style="margin-left: 5px;">
							    		<!--<b>距结束</b>-->
							    		<!--倒计时-->
							    		<script type="text/javascript">
												var countdown = function ()
												{
													var reg = /^\d{2}$/;
													var ending = new Date ("${goods.end_time}");
													var start_time = new Date ("${goods.start_time}");
													var now = new Date;
													if (now >= ending)
													{
														clearTimeout(this.timeout);
														div.innerHTML="时间已到";
														document.getElementById("button3").innerHTML+="<div style='margin-left: -9px;margin-top: -29px;'><button id='button4'>已结束</button></div>";
														return;
													}
													if(start_time >= now){
														var button3 = document.getElementById("button3");
														button3.textContent = "未开始"
														button3.style.backgroundColor = "blue";
														button3.style.color = "white";
														var disc = start_time - now;
														var day = parseInt (disc / 1000 / 60 / 60 / 24);
														var hour = parseInt (disc / 1000 / 60 / 60 % 24);
														hour = !reg.test(hour) ? "0" + hour : hour;
														var minute = parseInt (disc / 1000 / 60 % 60);
														minute = !reg.test(minute) ? "0" + minute : minute;
														var second = parseInt (disc / 1000 % 60);
														second = !reg.test(second) ? "0" + second : second;
														div.innerHTML = "距开始" +day + "天" + hour + "小时" + minute + "分" + second + "秒";
														this.timeout = setTimeout (countdown, 1000);
													}else{
														var disc = ending - now;
														var day = parseInt (disc / 1000 / 60 / 60 / 24);
														var hour = parseInt (disc / 1000 / 60 / 60 % 24);
														hour = !reg.test(hour) ? "0" + hour : hour;
														var minute = parseInt (disc / 1000 / 60 % 60);
														minute = !reg.test(minute) ? "0" + minute : minute;
														var second = parseInt (disc / 1000 % 60);
														second = !reg.test(second) ? "0" + second : second;
														div.innerHTML = "距结束" +day + "天" + hour + "小时" + minute + "分" + second + "秒";
														this.timeout = setTimeout (countdown, 1000);
													}

												}
												onload = countdown;
										</script>
							    		<div id="div"></div></span>
							    </div>
							    <div class="div5">
								    	<div class="div6" style="padding: 20px;">
								    		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
											<c:choose>
												<c:when test="${goods.end_time le time_compare}">
													<c:if test="${goods.auction_times==0}">
														最终价
														<b style="font-size: 30px; color: #000000;" >&nbsp;&nbsp;￥${goods.low_price}</b>
														&nbsp;&nbsp;&nbsp;&nbsp;${goods.auction_times}次出价
													</c:if>
													<c:if test="${goods.auction_times>0}">
														成交价
														<b style="font-size: 30px; color: #000000;" >&nbsp;&nbsp;￥${requestScope.bidding.get(0).bidding_price}</b>
														&nbsp;&nbsp;&nbsp;&nbsp;${goods.auction_times}次出价
													</c:if>
												</c:when>
												<c:when test="${goods.end_time gt time_compare}">
													<c:if test="${goods.start_time gt time_compare}">
														起拍价
														<b style="font-size: 30px; color: #000000;" >&nbsp;&nbsp;￥${requestScope.goods.low_price}</b>
													</c:if>
													<c:if test="${goods.start_time le time_compare}">
														当前价
														<b style="font-size: 30px; color: #000000;" >&nbsp;&nbsp;￥${requestScope.bidding.get(0).bidding_price}</b>
														&nbsp;&nbsp;&nbsp;&nbsp;${goods.auction_times}次出价
													</c:if>
												</c:when>
											</c:choose>

								    	</div>
								    	<br />
								    	<div style="margin-left: 120px; margin-top: 20px;">
								    		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;保证金
								    		<b style="font-size: 30px; color: red" >&nbsp;&nbsp;￥100</b>
								    	</div>
								    	<br />

								    	<div class="div6">
											<c:choose>
												<c:when test="${!empty userList.user_id}">
													<button id="button3" type="button"><a href="/homePage?method=comm_datils1&goods_id=${goods.goods_id}" class="a3">参   与   竞   拍 </a></button>
												</c:when>
												<c:when test="${empty userList.user_id}">
													<button id="bt3" type="button" onclick="alert('请先登录')"><a href="" >参   与   竞   拍 </a></button>
													<!--<script type="text/javascript">
														var bt3=document.getElementById("bt3");
														bt3.addEventListener("click",function () {
															swal("请先登录")
														})
													</script>-->
												</c:when>
											</c:choose>
								    	</div>
							    </div>
							    <div style="padding: 20px;">
							    	<hr />
							    	<table class="table1">
							    		<tr >
							    			<td >起拍价： ￥${goods.low_price}</td>
							    			<td> 加价幅度： ￥${goods.price_markup}</td>
							    			<td>保证金： ￥100</td>
							    		</tr>
							    		<tr>
							    			<td>佣&nbsp;&nbsp;&nbsp;金&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无</td>
							    			<td>延时周期：5分/次</td>
							    			<td>保留价： 无保留价</td>
							    		</tr>
							    	</table>
							    	<hr />
							    </div>
							</div>
						</div>	
						<div class="div7">
							<hr />	
							<ul>
								<li class="div7-ul-li"><b>竞拍流程</b></li>
								<li class="div7-ul-li">交保证金&nbsp;&nbsp;------</li>
								<li class="div7-ul-li">出价竞拍&nbsp;&nbsp;------</li>
								<li class="div7-ul-li">竞拍成功&nbsp;&nbsp;------</li>
								<li class="div7-ul-li">支付货款&nbsp;&nbsp;------</li>
								<li class="div7-ul-li">完成收货</li>
							</ul>
						</div>
					    
						<div class="div8">
							<div class="div8-ms"><a href="#one" style="text-decoration: none;color: #000000;">拍品描述</a></div>
							<div class="div8-ms"><a href="#two" style="text-decoration: none;color: #000000;">出价记录</a></div>
							<div class="div8-ms"><a href="#three" style="text-decoration: none;color: #000000;">拍品/流程说明</a></div>
							<div class="div8-ms"><a href="#four" style="text-decoration: none;color: #000000;">服务保障</a></div>
							<div class="div8-ms"><a href="#five" style="text-decoration: none;color: #000000;">保证金须知</a></div>
						</div>
						
						<div class="div9-ts">
							<p style="text-align: center; padding-top: 10px;">友情提示</p>
							<div>
								<p>&nbsp;&nbsp;&nbsp;1、真伪：送拍机构的企业资质已审核，但拍品介绍（图片、文字、视频等）及拍品资质文件（来源证明、鉴定证书等）均由机构自行发布并上传，所有拍品相关信息由送拍机构自行承担相应担保责任；</p>
								<span><p>&nbsp;&nbsp;2、售后：拍品多为孤品性质类商品，“7天退货”服务为卖家可选服务保障，不强制送拍机构提供，竞拍前请充分考虑；</p></span>
							</div>
						</div>
						<div>
							<table class="table2">
								<tr>
									<td class="table2-td">名称:${goods.goods_name}</td>
									<td class="table2-td">分类:${goods.second_cname}</td>
								</tr>
								<tr>
									<td class="table2-td" colspan="2">描述:${goods.goods_desc}</td>
								</tr>
							</table>
						</div>
						<div><h4 style="color: red; text-align: center;">以上信息仅供参考，请以实物为准，参数仅供参考不作为退换货依据</h4></div>
					    <div style="margin-top: 50px; margin-bottom: 50px;"><h4 class="h4"><span class="onimg_title"><pre id="one">拍品描述</pre></span></h4></div>
						<div>
							
							<div class="div11"><img  src="${goods.goods_picture}" class="picture3"/></div>
							<div class="div11"><img  src="image/详情2.JPG" class="picture3"/></div>
							<div class="div11"><img  src="image/详情3.JPG" class="picture3" /></div>
							
						</div>
						<div style="margin-top: 50px; margin-bottom: 50px;"><h4 class="h4"><span class="onimg_title"><pre id="two">出价记录</pre></span></h4></div>
						<div>
							<!--出价记录表格-->
							<table class="table3">
								<tr>
									<td class="table3-tr">状态</td>
									<td class="table3-tr">竞拍人</td>
									<td class="table3-tr">价格</td>
									<td class="table3-tr">时间</td>
								</tr>
								<c:forEach items="${requestScope.bidding}" end="5" var="bid">
									<tr>
										<c:choose>
											<c:when test="${bid.bidding_status==0}">
												<td class="table3-tr">出局</td>
											</c:when>
											<c:when test="${bid.bidding_status==1}">
												<c:if test="${goods.end_time le time_compare}">
													<td class="table3-tr">成功</td>
												</c:if>
												<c:if test="${goods.end_time gt time_compare}">
													<td class="table3-tr">领先</td>
												</c:if>
											</c:when>
										</c:choose>
										<td class="table3-tr">${bid.user_id}</td>
										<td class="table3-tr">${bid.bidding_price}</td>
										<td class="table3-tr">${bid.bidding_time}</td>
									</tr>
								</c:forEach>
							</table>
						</div>
						<!--文字居中横线标题-->
						<div style="margin-top: 50px; margin-bottom: 50px;"><h4 class="h4"><span class="onimg_title"><pre id="three">拍品/流程说明</pre></span></h4></div>
					    <div style="text-align: center;">
					    	<img src="image/流程.JPG" class="picture4"/>
					    </div>
					    <div style="margin-top: 50px; margin-bottom: 50px;"><h4 class="h4"><span class="onimg_title"><pre id="four">服务保障</pre></span></h4></div>
					    <div class="div-bzj">
					    	<img src="image/保障.JPG" class="picture5"/>
					    </div>
					    <div style="margin-top: 50px; margin-bottom: 50px;"><h4 class="h4"><span class="onimg_title"><pre id="five">保证金须知</pre></span></h4></div>
					    <div class="div-bzj">
					    	<img src="image/保证金.JPG" class="picture5"/>
					    </div>
					</div>
					<!--中间部分最右边（当前热拍部分）-->
					<div class="div3-right">
						<div class="div3-1">
							<span class="font">当前热拍</span>
						</div>
						<div class="div-p1">
							<img src="image/热搜1.JPG" class="p1"/>
							<div class="div3-da">
								<div class="float-left">当前价：<span style="color: red;">￥3,100</span></div>
								<div class="float-right"><a href="" class="div3-a">去看看</a></div>
							</div>
						</div>

						<div class="div-p1">
							<img src="image/热搜2.JPG" class="p1"/>
							<div class="div3-da">
								<div class="float-left">当前价：<span style="color: red;">￥2,700</span></div>
								<div class="float-right"><a href="" class="div3-a">去看看</a></div>
							</div>
						</div>

						<div class="div-p1">
							<img src="image/热搜3.JPG" class="p1"/>
							<div class="div3-da">
								<div class="float-left">当前价：<span style="color: red;">￥4,200</span></div>
								<div class="float-right"><a href="" class="div3-a">去看看</a></div>
							</div>
						</div>

						<div class="div-p1">
							<img src="image/热搜1.JPG" class="p1"/>
							<div class="div3-da">
								<div class="float-left">当前价：<span style="color: red;">￥5,700</span></div>
								<div class="float-right"><a href="" class="div3-a">去看看</a></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<!--底部-->
			<div class="div-foot">
				<hr style="border: 3px solid darkgray;"/>
				<div>
					<img src="image/底部.JPG" style="height: 150px; width: 1500px;"/>
				</div>
				<div class="div12">
					<div class="div13">
						<ul >
							<li style="list-style: none;margin-top: 10px;"><h2>拍卖保障</h2></li>
							<li class="div13-li">如实描述</li>
							<li class="div13-li">成交必卖</li>
							<li class="div13-li">鉴定证书</li>
							<li class="div13-li">拍前预览</li>
							
					    </ul>
					</div>
					
					<div class="div13">
						<ul >
							<li style="list-style: none;margin-top: 10px;"><h2>支付帮助</h2></li>
							<li class="div13-li">付款须知</li>
							<li class="div13-li">大额支付</li>	
					    </ul>
					</div>
					
					<div class="div13">
						<ul >
							<li style="list-style: none;margin-top: 10px;"><h2>机构支持</h2></li>
							<li class="div13-li">机构中心</li>
							<li class="div13-li">入驻标准</li>
							<li class="div13-li">资费标准</li>
							
					    </ul>
					</div>
					
					<div class="div13">
						<ul >
							<li style="list-style: none;margin-top: 10px;"><h2>新手帮助</h2></li>
							<li class="div13-li">竞拍流程</li>
							<li class="div13-li">竞拍协议</li>
							<li class="div13-li">代理出价</li>
							<li class="div13-li">保证金介绍</li>
							
					    </ul>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
